<template>
	<view>
		<map id="map" :longitude="longitude" :latitude="latitude" :style="contentStyle" scale="15"
			:enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png"
				@tap="returnLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	const chooseLocation = requirePlugin('chooseLocation');
	let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');

	export default {
		data() {
			return {
				from: {
					address: '',
					longitude: 0,
					latitude: 0
				},
				to: {
					address: '输入你的目的地',
					longitude: 0,
					latitude: 0
				},
				longitude: 116.397505,
				latitude: 39.908675,
				contentStyle: '',
				windowHeight: 0,
				map: null,
				flag: null
			};
		},
		methods: {
			returnLocationHandle: function() {
				this.map.moveToLocation();
			},
			chooseLocationHandle: function(flag) {
				let that = this;
				let key = that.tencent.map.key; // 使用在腾讯位置服务申请的key
				let referer = that.tencent.map.referer; // 调用插件的app的名称
				that.flag = flag;
				let location = JSON.stringify({
					latitude: that.latitude,
					longitude: that.longitude,
				});
				// 跳转页面,进行地图选点
				wx.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}`
				});
			}
		},
		onShow: function() {
			let that = this
			that.map = uni.createMapContext('map'); // 创建地图对象
			// 为腾讯地图模块传入key
			let qqmapsdk = new QQMapWX({
				key: that.tencent.map.key
			});
			// 监听全局的自定义事件
			uni.$on('updateLocation', function(location) {
				if (that.flag != null) {
					return
				}
				let latitude = location.latitude; // 纬度
				let longitude = location.longitude; // 经度
				that.latitude = latitude;
				that.longitude = longitude;
				that.from.latitude = latitude;
				that.from.longitude = longitude
				// 根据经纬度逆地址解析,返回具体的地址描述
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude,
					},
					success: function(resp) {
						that.from.address = resp.result.address;
					},
					fail: function(error) {
						console.error(error)
					}
				});
			});
			// 如果乘客进行了地图选点,则此处不会为null
			let location = chooseLocation.getLocation();
			if (location != null) {
				let name = location.name;
				let latitude = location.latitude;
				let longitude = location.longitude;
				if (that.flag == 'from') {
					that.from.address = name;
					that.from.longitude = longitude;
					that.from.latitude = latitude;
				} else {
					that.to.address = name;
					that.to.longitude = longitude;
					that.to.latitude = latitude;
				}
				// 跳转到创建订单页面
				uni.setStorageSync('from', that.from); // 将起点进行本地缓存
				uni.setStorageSync('to', that.to); // 将终点进行本地缓存
				uni.navigateTo({
					url: '../../pages/create_order/create_order'
				})
			}
		},
		onHide: function() {
			uni.$off('updateLocation')
			chooseLocation.setLocation(null); // 清除地图选点的结果
		},
		onLoad: function() {
			let that = this;
			let windowHeight = uni.getSystemInfoSync().windowHeight;
			that.windowHeight = windowHeight;
			that.contentStyle = `height:${that.windowHeight}px;`;
		},
		onUnload: function() {
			chooseLocation.setLocation(null);
		}
	};
</script>

<style lang="less">
	@import url('workbench.less');
</style>